<template>
  <!--评论模块-->
  <div class="c_comment_box"
       id="app_comment">
    <div class="c_grayTit1 clearfix">
      精彩评论
      <a :href="toLink"
         class="c_toPage_comment"
         data-sudaclick="caitong_newsdetail_comment">发表评论</a>
    </div>
    <div class="c_comments" v-show="rdata.length>0">
      <template v-for="(i,v) in rdata">
        <div class="c_comCard">
          <div class="c_wb_profile_img">
            <img :src="v.configDetail.wb_profile_img || 'http://tvax3.sinaimg.cn/default/images/default_avatar_male_50.gif'"
                 :alt="v.configDetail.wb_screen_name">
          </div>
          <div class="c_comRight">
            <div class="c_comRLine1">
              <div class="c_wb_screen_name">{{v.configDetail.wb_screen_name || v.nick}}</div>
              <div class="c_area">{{v.configDetail.area || v.area}}</div>
            </div>
            <div class="c_comContent {{!v.showMore?'c_comContentAll':''}}"
                 ref="i">
              {{v.content}}
            </div>
            <div class="c_comMoreBack"
                 v-show="v.showMore"
                 v-touch:tap="h_allShow(i)">显示全部</div>
            <div class="c_lastLine"></div>
          </div>
        </div>
      </template>
  
    </div>
    <div class="c_moreCommentBtn"
         v-show="rdata.length>0">
      <a :href="toLink"
         data-sudaclick="caitong_newsdetail_comments">
                 查看更多评论
                 </a>
    </div>
    <div class="c_noComment"
         v-show="rdata.length===0">
      暂无评论
    </div>
  </div>
</template>

<script>
export default {
  // el: "#app_comment",
  data() {
    return {
      rdata: {},
      toLink: "",
      docID: window.conf_comment.docID || "fyeycfp9258028",
      commentId: window.conf_comment.commentId || "ty:comos-fyeycfp9258028:0",
    }
  },
  methods: {
    init(_next) {
      var that = this;
      var jsonpUrl = "http://sapi.sina.cn/article/getall?docID=" + that.docID + "&commentId=" + that.commentId;
      var jsonpName = "getall_" + that.docID;
      $.ajax({
        url: jsonpUrl,
        dataType: 'jsonp',
        data: {},
        cache: false,
        jsonpCallback: jsonpName,
        type: "get",
        success: function (data) {
          if (data.status === 0) {
            _next(data.data);
          } else {
            console.log("err");
            console.log(data);
          }
        }
      })
    },
    h_allShow(i) {
      var newD = this.rdata;
      Vue.set(this.rdata[i], "showMore", false);
      this.rdata = newD;
    }
  },
  created() {
    var that = this;
    this.init(function (data) {
      that.rdata = data.cmnt.cmntlist;
      that.$nextTick(function () {
        $(".c_comContent").each(function (i, v) {
          Vue.set(that.rdata[i], "showMore", false);
          if ($(v).height() > 84) {
            Vue.set(that.rdata[i], "showMore", true);
          }
        })
      })
      that.toLink = "http://cmnt.sina.cn/index?product=comos&index=" + that.docID + "&tj_ch=sports";
    })
  }

}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  lightFont=#95989A;
  btnBd=#EBE8E8;
c_grayTit() {
  background-color: c_bg;
  padding: 10px 0 10px 8px;
  color: lightFont;
  font-size 16px
}

// 热门评论
.c_toPage_comment {
  float: right;
  margin-right: 8px;
}

.c_grayTit1 {
  c_grayTit()
  padding: 16px 0 12px 8px;
  line-height: 21px;
}
.ceshi{
  color #fff
}
.c_comCard {
  // padding-left: 56px;
  padding-top: 12px; // display: none;
}

.c_wb_profile_img {
  // border-radius: 32px;
  // overflow: hidden;
  float: left;
  margin-left: 8px;
  margin-top: 4px;
  img {
    border-radius: 32px;
    display: block;
    width: 32px;
    height: 32px;
  }
}

.c_comRight {
  margin-left: 56px;
}

.c_comRLine1 {
  color: lightFont;
}

.c_wb_screen_name {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 1px;
}

.c_area {
  font-size: 14px;
  line-height: 20px;
}

.c_comContent {
  margin-top: 10px;
  padding-right: 8px;
  font-size: 14px;
  line-height: 21px;
  max-height: 84px;
  overflow: hidden;
}

.c_comContentAll {
  max-height: 10000px;
}

.c_lastLine {
  height: 16px;
  border-1px(c_split);
}
.c_comCard:last-child .c_lastLine{
  &:after{
    display:none;
  }
}
.c_comments{
  border-1px(c_split);
}

.c_comMoreBack {
  color: #F3C200;
  margin-top: 10px;
  font-size: 14px;
}

.c_moreCommentBtn {
  line-height: 44px;
  // color: #F3C200;
  color #F3C200
  text-align center;
  // text-align: center;
  font-size: 14px;
  display: block;
  width: 100%;
  a{
      color #F3C200
  }
}
.c_noComment{
  font-size 14px
  line-height 20px
  padding 34px 0
  text-align center
  color lightFont
}
</style>